<template>
  <div class="box">

    <div class="box-item">
      <div class="box-item-content" @click="goCreatePage" ><img src="https://img-qn.51miz.com/Element/00/41/56/38/aed93197_E415638_39d3c2dc.png" alt=""></div>
      <div class="box-item-content" v-for="item in state.data" :key="item.id"><img :src="item.userProfilePhoto" alt=""></div> 

      
     
     
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import { useRouter} from 'vue-router'
import axios from '@/api'
const router = useRouter()
const props = defineProps({
  userId : Number
})
const state = reactive({
  data:[],
  userProfilePhoto:''
})
// console.log(props.userId);

onMounted( async() => {
  try {
    const {data} = await axios.get('users/findUserRecommend',{
      params:{
        userId : props.userId
      }
    
    })
    // console.log(data);
    state.data = data
    // state.userProfilePhoto = data[0].userProfilePhoto
    // console.log( state.data );
    
  } catch (error) {
    
  }
})



const goCreatePage = () =>{
  router.push({path: 'createPage', query: {userId: props.userId}})
}

</script>

<style lang="less" scoped>
.box {
  display: flex;
  

  .box-item {
    display: flex;
    flex-wrap: wrap;


    .box-item-content {
    margin-right: 0.125rem;

      img {
        width: 3.2rem;
        height: 4rem;
      }
    }
  }

}
</style>